<template>
    <div class="mui-content">
      <router-link to="/Resource" class="content mui-text-center" active-class="active active1">
        <div class="top top1">
          <!--<img src="../../assets/img/ziyuan_weixiuanzhong.png" alt="">-->
        </div>
        <div class="title">资源</div>
      </router-link>
      <router-link to="/Active" class="content mui-text-center" active-class="active active2">
        <div class="top top2">
          <!--<img src="../../assets/img/hd_weixuanzhong.png" alt="">-->
        </div>
        <div class="title mui-text-center">活动</div>
      </router-link>
      <router-link to="/Index" class="content mui-text-center" active-class="active active3">
        <div class="top top3">
          <!--<img src="../../assets/img/geren_weixuanzhong .png" alt="">-->
        </div>
        <div class="title">个人</div>
      </router-link>
    </div>
</template>

<script>
    export default {
        name: "Foot.vue"
    }
</script>

<style scoped>
  .mui-content {
    display: flex;
    height: 56px;
    background-color: white;
  }
  .mui-content .content{
    color: black;
    flex: 1;
  }
  .mui-content .content .top{
    height: 23px;
    width: 23px;
    margin: 5px auto;
    background-size: 23px 23px;
    /*background-image: url('../../assets/img/ziyuan_weixiuanzhong.png');*/
    /*font-size: 1.6rem;*/
  }
  .mui-content .content .top1{
    background-image: url('../../assets/img/ziyuan_weixiuanzhong.png');
  }
  .mui-content .content .top2{
    background-image: url('../../assets/img/hd_weixuanzhong.png');
  }
  .mui-content .content .top3{
    background-image: url('../../assets/img/geren_weixuanzhong.png');
  }
  .mui-content .content .top img{
    /*font-size: .6rem;*/
    margin-top: 5px;
    width: 1.6rem;
    height: 1.35rem;
  }
  .mui-content .content .title{
    font-size: 0.8rem;

  }
  .mui-content .active{
    color:rgba(93, 194, 240, 1);
  }
  .mui-content .active1 .top {
    background-image: url("../../assets/img/ziyuan_xiuanzhong.png");
  }
  .mui-content .active2 .top {
    background-image: url("../../assets/img/hd_xuanzhong.png");
  }
  .mui-content .active3 .top {
    background-image: url("../../assets/img/geren_xuanzhong.png");
  }
</style>
